<template>
	<view class="content">
		<!-- rightIcon="chatboxes-filled" @clickRight="handleClickRight" -->
		<nav-bar rightIcon="notification" @clickRight="handleClickRight">
			<template v-slot:title>
				<text class="titles">{{ $t('流量方舟') }}</text>
			</template>
			<template v-slot:number v-if="statusXx">
				<!-- v-if="statusXx" -->
				<text class="numbers"> </text>
			</template>
		</nav-bar>
		<view class="banner">
			<!-- <image class="img" src="@/assets/index/1@2x.png"></image> -->
			<view class="iconYjNum">
				<view class="bannerTop">
					{{ $t('荷包總資產') }}(CFP)

				</view>
				<view class="yjNum">
					<image v-if="showIncomeJs" src="@/assets/myFlow/zhenyan.png" @click="changeShowJs"
						style="width: 40rpx;height: 40rpx;">
					</image>
					<image v-else src="@/assets/myFlow/biyan.png" @click="changeShowJs" style="width: 40rpx;height: 40rpx;">
					</image>
				</view>
			</view>
			<view class="bannerBotton">
				<view v-if="!showIncomeJs">{{ moneyAmout.remainsTotalAmount || 0 }}</view>
				<view v-else> ****** </view>
				<!-- {{ !showIncomeJs ? flowList.flowUnlockTotal : '— —' }} -->
			</view>
			<!-- 			<view class="by">
			</view> -->
		</view>
		<uni-notice-bar @click="handleGg" showGetMore :speed="35" style="margin-bottom: 0px" scrollable single showIcon
			color="#12FFFA" background-color="#18171E" :text="textValue"></uni-notice-bar>
		<!-- 		<view class="inform">
			
			<view class="left" style="display: flex;justify-content: center;align-items: center;">
				<image style="width: 16px;height: 14px;" src="@/assets/index/tongzhi.png" mode=""></image>
				<view style="color: #FFFFFF;font-size: 14px;margin-left: 4px;">{{$t('乜嘢係流量包')}}</view>
				
			</view>
			<image class="right" style="width: 8px;height: 13px;" src="@/assets/index/right.png" mode=""></image>
		</view> -->
		<!-- <view class="swiper"> -->
		<uni-swiper-dot :info="info" :current="current" field="content">
			<swiper class="swiper-box" @change="change" :autoplay="true" :interval="4000" :duration="1500">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view class="swiper-item">
						<image :src="lang == 'en' ? item.englishUrl : item.chineseUrl" class="imgBlock"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 		<image v-if="i18n.global.locale!=='en'" src="@/assets/index/qukuailian.png" mode="" class="imgBlock"></image>
		<image v-else style="margin-top: 10px;" src="@/assets/index/banner2.png" mode="" class="imgBlock"></image> -->
		<!-- </view> -->
		<!-- 		<view class="content-2">
			{{$t('請選擇你要購買的流量包')}}
		</view>
		<view class="content-3">
			{{$t('流量商購買選擇流量方案，供用戶使用流量')}}
			<br>
			{{$t('優化')}}<text class="text-bs">{{$t('加速服務')}}</text>
		</view> -->
		<view class="content-4">
			<view class="con4-item" v-for="(item, index) in flowList" :key="item.id">
				<view class="title">
					<image class="icon" src="@/assets/index/1.png" v-if="index == 0"></image>
					<image class="icon" src="@/assets/index/2.png" v-if="index == 1"></image>
					<image class="icon" src="@/assets/index/3.png" v-if="index == 2"></image>
					<view class="text">
						{{ $t(`${item.flowName}`) }}
					</view>
					<view @click="flowDetail(item)" class="gotoshop">
						{{ $t('立即購買') }}
					</view>
				</view>
				<view class="data">
					<view class="jg num">
						<span style="color: #12FFFA;">{{ item.flowPrice }} </span>
						<span style="color: #12FFFA;">CFP</span><br>
						<span style="color: #FFFFFF;">{{ $t('價格') }}</span>
					</view>
					<view class="ll num">
						<span style="color: #12FFFA;">{{ item.flowAmount }} </span>
						<span style="color: #12FFFA;">GB</span><br>
						<span style="color: #FFFFFF;">{{ $t('流量') }}</span>
					</view>
					<view class="cz num">
						<span style="color: #12FFFA;">{{ item.totalAmount }} </span>
						<span style="color: #12FFFA;">CFP</span><br>
						<span style="color: #FFFFFF;">{{ $t('產值') }}</span>
					</view>
				</view>
				<view class="border"></view>
				<view class="bot-num">
					<view class="cc text">
						{{ $t('每日預估產出') }}:{{ item.predictAmountTo }}CFP
					</view>
					<!-- 					<view class="xs text">
						销售<text class="num">{{item.xs}}</text>笔
					</view> -->
				</view>
			</view>
		</view>
		<!-- <m-tabbar fixed fill :current="0"></m-tabbar> -->
	</view>
</template>

<script setup>
import {
	computed,
	onMounted,
	ref,
	reactive
} from 'vue'
import {
	onShow,
	onHide
} from "@dcloudio/uni-app"
import {
	jump
} from '@/utils/common.js'
import homeIndex from '@/hooks/index.js'
import i18n from '@/locale/index'
// import { Logger } from 'sass'
const {
	list,
	details,
	page,
	size,
	sumComputed,
	getAsyncList,
	getGgApi,
	getMyFlow,
	getMyFlowMoney,
	getXxApi
} = homeIndex()
const flowList = ref([])
const moneyAmout = ref({})
const ggList = ref({})
const lang = ref('')
const current = ref(0)
const info = ref([])
const flowListNum = ref({})
const textValue = ref('')
const statusXx = ref(false)
const showIncomeJs = ref(false)
const flowDetail = (item) => {
	// jump({
	// 	path: 'orderDetail',
	// 	data: {
	// 		id: item.id
	// 	}
	// })

	// uni.showToast({
	// 	title: `${i18n.global.t('此功能尚未开放')}`,
	// 	icon: 'none',
	// })
	uni.navigateTo({
		url: "/pages/orderDetail/orderDetail?id=" + item.id,
		animationType: "fade-in",
		animationDuration: 200,
	});

}

const change = (e) => {
	current.value = e.detail.current;
}
const changeShowJs = () => {
	showIncomeJs.value = !showIncomeJs.value
}
const clickRight = () => {
	// jump({
	// 	path: 'myFlow'
	// })
	uni.navigateTo({
		url: "/pages/myFlow/myFlow",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const handleClickRight = () => {
	uni.navigateTo({
		url: "/pages/msgList/msgList",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const handleGg = () => {
	uni.navigateTo({
		url: "/pages/ggList/ggList",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const getLIst = async () => {
	const data = await getAsyncList('flowPackage/queryFlowPackageList')
	flowList.value = data
}
const getGgLIst = async () => {
	let list = {
		pageNum: 1,
		pageSize: 9999,
	}
	const data = await getGgApi('user/getAnnouncement', list)
	lang.value = uni.getStorageSync('lang')
	if (lang.value == 'en') {
		textValue.value = data.records[0].contentEnglish
	} else {
		textValue.value = data.records[0].contentChineseTraditional
	}
	// ggList.value = data
}
const getXxWd = async () => {
	let list = {
		pageNum: 1,
		pageSize: 9999,
		languageType: uni.getStorageSync('lang') == 'en' ? 'en' : 'zh',
		userId: uni.getStorageSync('setUserInfo').userId
	}
	const data = await getXxApi('message/unreadMessage', list)
	if (!data) {
		statusXx.value = false

	} else {
		statusXx.value = true
	}
}
const getBannerLIst = async () => {
	let list = {
		pageNum: 1,
		pageSize: 9999,
	}
	const data = await getGgApi('/user/getBanner', list)
	lang.value = uni.getStorageSync('lang')
	info.value = data.records
	// if(lang.value == 'en'){
	// 	textValue.value = data.records[0].contentEnglish
	// }else{
	// 	textValue.value = data.records[0].contentChineseTraditional
	// }
	// ggList.value = data
}
onMounted(async () => {
	let list = {
		userId: uni.getStorageSync('setUserInfo').userId
	}
	let dataMyFlowMoney = await getMyFlow('user-flow-inventory/flowUser', list)
	flowListNum.value = dataMyFlowMoney

})
const userInfo = async () => {
	let list = {
		userId: uni.getStorageSync('setUserInfo').userId
	}
	let data = await getMyFlow('user/personalInfo', list)
	uni.setStorage({
		key: 'googleVerificationSwitch',
		data: data.googleVerificationSwitch
	})
}
let time
onShow(async () => {
	getLIst()
	getXxWd()
	userInfo()
	if (time) {
		clearInterval(time)
	}
	time = setInterval(() => {
		getXxWd()
	}, 10000)
	getGgLIst()
	getBannerLIst()
	let list = {
		userId: uni.getStorageSync('setUserInfo').userId
	}
	let moneyAmoutData = await getMyFlowMoney('user/personalCenter', list)
	moneyAmout.value = moneyAmoutData

	uni.setTabBarItem({
		index: 0,
		text: i18n.global.t('首頁'),
	})
	uni.setTabBarItem({
		index: 1,
		text: i18n.global.t('資產'),
	})
	uni.setTabBarItem({
		index: 2,
		text: i18n.global.t('我的'),
	})
})
onHide(() => {
	clearInterval(time)
})
</script>

<style lang="scss" scoped>
.titles {
	font-size: 18px;
	margin-top: 20rpx;
	margin-left: 90rpx;


}

.numbers {
	color: #fff;
	border-radius: 50%;
	font-size: 18rpx;
	// padding: 10rpx;
	width: 25rpx;
	height: 25rpx;
	line-height: 35rpx;
	text-align: center;

	background-color: #FBAC01;
	position: absolute;
	top: 20rpx;
	z-index: 999999;
	right: 35rpx;
	zoom: .8;
}

.yjNum {
	// position: absolute;
	margin-left: 25rpx;
}

.iconYjNum {
	display: flex;

}

.swiper-box {
	height: 240rpx;
}

.imgBlock {
	width: 100%;
	height: 240rpx;
}

.banner {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 263rpx;
	background-image: url('@/assets/index/banner.png');
	background-size: cover;
	background-position: center;

	.bannerTop {

		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 300;
		color: #12FFFA;

	}

	.bannerBotton {

		font-size: 35px;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #12FFFA;
	}

	.by {
		position: absolute;
		top: 20rpx;
		z-index: 999999;
		right: 35rpx;
		zoom: .8;
	}

	.yjNum {
		// position: absolute;
		margin-left: 20rpx;
	}

	.iconYjNum {
		display: flex;

	}

	.swiper-box {
		height: 240rpx;
	}

	.imgBlock {
		width: 100%;
		height: 240rpx;
	}

	.banner {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 263rpx;
		background-image: url('@/assets/index/banner.png');
		background-size: cover;
		background-position: center;
	}
}

.inform {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	// flex-direction: column;
}

.swiper {
	width: 691px;
	height: 240px;
	margin-top: 10px;
}

.content-1 {
	width: 486rpx;
	height: 397rpx;
	margin-top: 80rpx;

	.img {
		width: 100%;
		height: 100%;
	}
}

.content-2 {
	margin-top: 51rpx;
	font-size: 40rpx;
	color: #fff;
	text-align: center;
	width: 100%;
	font-family: PingFangSC-Semibold;
}

.content-3 {
	margin-top: 23rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular;
	color: #808492;
	text-align: center;
	line-height: 36rpx;

	.text-bs {
		color: #fff;
	}
}

.content-4 {
	margin-top: 45rpx;
	width: 100%;

	.con4-item {
		width: 100%;
		box-sizing: border-box;
		// height: 290rpx;
		background: #24232C;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		padding: 30rpx 25rpx 28rpx 26rpx;

		.title {
			display: flex;
			align-items: center;

			.icon {
				width: 103rpx;
				height: 69rpx;
			}

			.text {
				font-size: 34rpx;
				margin-left: 17rpx;
				color: #fff;
				font-weight: Medium;
				font-family: PingFangSC-Medium;
			}

			.gotoshop {
				margin-left: 200rpx;
				width: 140rpx;
				height: 45rpx;
				background: linear-gradient(90deg, #039BDA, #0DF2ED);
				border-radius: 23px;
				text-align: center;
				line-height: 45rpx;
				color: #FFF;
				font-size: 15rpx;
			}
		}

		.data {
			margin-top: 12rpx;
			display: flex;

			.num {
				width: 230rpx;

				:nth-child(1) {
					font-size: 36rpx;
					font-weight: Bold;
					color: #FFF;
					font-family: DINAlternate-Bold;
				}

				:nth-child(2) {

					color: #FFF;
					font-size: 22rpx;
					font-weight: lighter;
					font-family: PingFangSC-Light;
				}

				:nth-child(4) {
					color: #808492;
					font-size: 22rpx;
					font-weight: lighter;
					font-family: PingFangSC-Light;
				}
			}
		}

		.border {
			width: 100%;
			height: 1rpx;
			background: #23262F;
			border-bottom: 1rpx solid #FFFFFF;
			margin-top: 20rpx;
			opacity: 0.05;
		}

		.bot-num {
			display: flex;
			margin-top: 20rpx;
			justify-content: space-between;

			.text {
				color: #808492;
				font-size: 24rpx;
				font-weight: Regular;
				font-family: PingFangSC-Regular;
			}

			.num {
				color: rgb(249, 171, 112);
			}
		}
	}
}

.uni-swiper__warp {
	width: 100%;
}
</style>